var eerai = (function() {
	var canvas,code,whole,repair,point,that,createUrl,currentY,width,height,repairW,repairH;
	var eerai_ = function(canvas,createUrl){
		this.canvas = canvas;
		that = this;
		$.ajax({
			url : "http://localhost:28088/"+createUrl,
			type : 'post',
		    dataType:"json", 
			async: false,//使用同步的方式,true为异步方式
			success : function(data){
				that.whole = "/load?code=" + data["whole"];
				that.repair = "/load?code=" + data["repair"];
				that.original = "/load?code=" + data["original"];
				that.point = $.parseJSON(data["point"]);
				that.repairW = data["repairWidth"];
				that.repairH = data["repairHeight"];
				that.currentY = data["y"];
				that.code = data["verifyCode"];
				console.info(data);
			}
		});
		
		var image = new Image();
		image.src = that.whole;

		
		
		console.info("test");
       
		image.onload = function(){   
			that.width = image.width;
			that.height = image.height;
			
			var html = '<canvas width="'+that.width +'" height="'+that.height +'" id="canvas_whole" style="display: none;">建议升级浏览器</canvas>';
			html += '<div id="conver_repair" style="width: '+that.repairW +';height:'+that.repairH+';'+
					'background-image:url(\''+that.repair+'\');top:'+that.currentY+'"></div>';
			html += '<div style="padding-top: 10px;">';
			html += '<div id="slider" class="dragdealer">';
			html += '<div class="handle red-bar">&nbsp;</div>';
			html += '</div>';
			html += '</div>';
			$("#"+canvas).html(html);
			$("#"+canvas).css("width",image.width).css("height",image.height+100);
			console.info(image.width);
			console.info(image.height);
			
			
			canvas = document.getElementById("canvas_whole");  
		    context = canvas.getContext("2d");  
		    context.clearRect(0, 0, canvas.width, canvas.height)  
			var length = that.point["point"].length;
			var width  = that.point["width"] ;
			var height = that.point["height"] ;
			var itemWidth = that.point["itemWidth"];
			var itemHeight = that.point["itemHeight"];
			var x = width/itemWidth;
			var y = height/itemHeight;
			var index = 0;
			var currentX = 0;
			var currentY = 0;
			for(var i = 0; i < y;i++){
				for(var j = 0; j < x ; j++){
					var obj = that.point["point"][index];
					if(obj != undefined){
						context.drawImage(image,currentX,currentY,itemWidth,itemHeight,obj["x"],obj["y"],itemWidth,itemHeight);
					}
					currentX += itemWidth;
					index++;
				}
				var currentX = 0;
				var currentY = itemHeight * (i+1);
			}
			$(canvas).css("display","block");
			

			 new Dragdealer('slider', {
		    	  animationCallback: function(x, y) {
		    		if(x > 0){
		   				var value = new BigDecimal(x+"").multiply(new BigDecimal(that.width + "")).subtract(new BigDecimal(x+"").multiply(new BigDecimal(that.repairW+"")));	
			   			console.info(value.toString());
			   			if(value.compareTo(BigDecimal.ZERO) > 0){
				    	    var $conver = $("#conver_repair"); 
				    		console.info(value.toString());
			    			$conver.css("left",value.toString() +"px");	
			   			}
		    		}
		    	  },callback:function(x,y){
		    		  var value = new BigDecimal(x+"").multiply(new BigDecimal(that.width + "")).subtract(new BigDecimal(x+"").multiply(new BigDecimal(that.repairW+"")));
		    		  var data = {"code":that.code,"value":parseInt(value.toString())};
		    		  $.post("/",data,function(result){
		    			  alert(result);
		    			  window.location.reload();
		    		  });
		    	  }
		   	});
		}
		
	}
	
	
    return eerai_;
}());

/**	
 * 	图片上拖拉
 
  //	绘制图片坐标
         var wholeX= $("#cover_content").offset().left;
         var wholeY= $("#cover_content").offset().top;
         //设置画布宽高
         var canvasW = 400;
         var canvasH = 200;
         var minWidth  = 0;
         var minHeight = 0;
         var maxWidth  = canvasW - 50;
         var maxHeight = canvasH - 50;
         console.info(" wholeX  :"+wholeX  +"|  wholeY :"+wholeY);
         //区别moueseup与click的标志
         var moveFlag=false;
         var clickFlag=false;
         var $conver = $("#conver_repair"); 
         $conver.css("background-image","url("+repair+")");
         //	拖拽函数
         $conver.mouseup(function(){
        	 moveFlag=false;
        	 var currentX = $(this).position().left;
        	 var currentY = $(this).position().top;
             console.info("currentX : " +currentX +"__  currentY:"+currentY);
         });
         $conver.mousedown(function(e_){
        	 if(e_.which == 1){
        		 console.info("test");
	        	 moveFlag=true;
	             clickFlag=true;
        	 }
         });
         
         
         
         $("#cover_content").mousemove(function(e_){
                clickFlag=false;
                var me =window.event || e_;
                if(moveFlag && !clickFlag){
                    //将鼠标坐标传给Canvas中的图像
                    //下面四个条件为限制div以及图像的活动边界
                    if(me.clientX-25 < wholeX){
	                   	 $conver.css("left",minWidth +"px");
                    }else if(me.clientY-25  < wholeY){
	                   	 $conver.css("top", minHeight +"px");
                    }else if(me.clientX+25 > wholeX+canvasW){
	                   	 $conver.css("left",maxWidth+"px");
                    }else if(me.clientY+25 > wholeY+canvasH){
	                   	 $conver.css("top",maxHeight +"px");
                    }else{
	                    $conver.css("left",me.clientX - wholeX - 25 +"px");
		                $conver.css("top",me.clientY - wholeY - 25 +"px");
                    }
                }
            });
  
  
 */ 
